<template>
  <div>
    <el-row :gutter="10">
      <el-col :span="6">
        <el-input v-model="ruleForm.name1" clearable placeholder="请输入内容"
                  @blur="checkBlur($event)"
                  @keyup.enter.native="$event.target.blur"
        ></el-input>
        <el-input v-model="ruleForm.name" clearable placeholder="请输入内容"
                  @keyup.enter.native="addTags($event)"
        ></el-input>
      </el-col>
      <el-col :span="24">
        <el-tag
            v-for="(tag,index) in checkedStocks"
            :key="index"
            closable
            @close="closeTag(index,'checkedStocks')">{{tag.code}}&nbsp;&nbsp;{{tag.zwjc}}
        </el-tag>
      </el-col>
    </el-row>
    <el-row :gutter="10">
      <el-col :span="6">
        <el-button type="primary" @click="addTag('checkedStocks')">添加一个tag</el-button>
      </el-col>
      <el-col :span="6">
        <el-button type="primary" @click="tagMap('checkedStocks')">遍历获取</el-button>
        <el-button type="primary" @click="clear('checkedStocks')">删除-清空</el-button>
        <el-button @click="find">数组查找</el-button>
      </el-col>


    </el-row>
    <el-divider></el-divider>
    <el-tag
        v-for="tag in dynamicTags"
        :key="tag"
        :disable-transitions="false"
        closable
        @close="handleClose(tag)">
      {{tag}}
    </el-tag>
    <el-input
        v-if="inputVisible"
        ref="saveTagInput"
        v-model="inputValue"
        class="input-new-tag"
        size="small"
        @blur="handleInputConfirm"
        @keyup.enter.native="handleInputConfirm"
    >
    </el-input>
    <el-button v-else class="button-new-tag" size="small" @click="showInput">+ New Tag</el-button>

  </div>
</template>

<script>
export default {
  name: "table",
  components: {},
  data() {
    return {
      ruleForm: {
        name: '',
        name1: ""
      },
      dynamicTags: ['标签一', '标签二', '标签三'],
      inputVisible: false,
      inputValue: '',
      checkedStocks: [{code: '10', zwjc: '第一'}, {code: '11', zwjc: '第二'}]
    }
  },
  created() {
  },
  mounted() {
  },
  methods: {
    tagMap(checkedStr) {
      let result = this.getParams(this[checkedStr], 'code')
      if (result) {
        console.log(result)
      } else {
        console.log('空')
      }
    },
    /**
     * 鼠标移开输入框触发:https://blog.csdn.net/weixin_30565327/article/details/99272494
     * @param e
     */
    checkBlur(e) {
      console.log(e)
      console.log(e.target.value, this.ruleForm.name)
      this.addTag('checkedStocks', {code: this.ruleForm.name, zwjc: this.ruleForm.name})
    },
    getParams(checked, code) {
      return checked.map(function (item) {
        return item[code]
      }).join(';')
    },
    addTags(e) {
      this.checkedStocks.push({code: this.ruleForm.name, zwjc: this.ruleForm.name})
      e.target.value = ''
    },
    addTag(checkedStr, value = {code: '12', zwjc: '第三ABC'}) {
      this[checkedStr].push(value)
    }
    ,
    clear(checkedStr) {
      console.log(this[checkedStr])
      this[checkedStr] = []
      console.log(this)
    }
    ,
    closeTag(index, checkedStr) {
      console.log(index, checkedStr, this.checkedStocks)
      this[checkedStr].splice(index, 1);
      console.log(this.checkedStocks)
    }
    ,
    handleClose(tag) {
      this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
    }
    ,

    showInput() {
      this.inputVisible = true;
      this.$nextTick(() => {
        this.$refs.saveTagInput.$refs.input.focus();
      });
    }
    ,

    handleInputConfirm() {
      let inputValue = this.inputValue;
      if (inputValue) {
        this.dynamicTags.push(inputValue);
      }
      this.inputVisible = false;
      this.inputValue = '';
    }
    ,
    find() {
      let num = ['1', 'b', 's'].find(n => n == 'bs')
      if (num) {
        console.log(num)
      } else {
        console.log('不存在')
      }
    }
  }
}
</script>
<style scoped>
.el-tag {
  margin-right: 5px;
}
</style>
